import React, { Component } from 'react'
import { Layout } from 'antd';
import style from './Toolesleft.module.less'
import { connect } from 'react-redux';
import classNames from 'classnames';
const { Sider } = Layout;

class Middwral extends Component {


    render() {
        const { ClickHiddle, name } = this.props
        return (
            <Sider
                width={250}
                style={{ background: 'rgba(255,255,255)', height: '100%' }}
            >
                <div className={style.left_top_box}><h1 className={style.left_h1} onClick={(event) => ClickHiddle(event)}>音乐工具</h1></div>
                <ul className={style.wul}>
                    {/*<li className={style.wli}>*/}
                    {/*    <p>虚拟乐器</p>*/}
                    {/*    <ul className={style.lul}>*/}
                    {/*        <li id='guitar' onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '吉他' })}>吉他</li>*/}
                    {/*        <li onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '钢琴' })}>钢琴</li>*/}
                    {/*        <li onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '贝斯' })}>贝斯</li>*/}
                    {/*    </ul>*/}
                    {/*</li>*/}
                    <li className={style.wli}>
                        <p>设备</p>
                        <ul className={style.lul}>
                            <li onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '节拍器' })}>节拍器</li>
                        </ul>
                    </li>
                    <li className={style.wli}>
                        <p>查找索引</p>
                        <ul className={style.lul}>
                            <li onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '音名对照表' })}>音名对照表</li>
                            <li onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '音程查找索引' })}>音程查找索引</li>
                            <li onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '和弦查找索引' })}>和弦查找索引</li>
                            <li onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '音阶查找索引' })}>音阶查找索引</li>
                        </ul>
                    </li>
                    <li className={style.wli}>
                        <p>其他</p>
                        <ul className={style.lul}>
                            <li onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '五度圈' })}>五度圈</li>
                            <li onClick={(event) => ClickHiddle(event)} className={classNames({ 'actives': name === '音乐术语' })}>音乐术语</li>
                        </ul>
                    </li>
                </ul>
            </Sider>

        )
    }
}


const mapStateToProps = (state) => ({ name: state.onlineToolesReducer.name })
export default connect(mapStateToProps)(Middwral)